<template>
  <div>
    <div class="box">
      <van-nav-bar left-arrow class="boxx">
        <template #right>
          <!-- <van-icon name="#xe624;" size="18" /> -->
          <van-icon
            name="dituzhaofang"
            class="iconfont"
            class-prefix="icon"
            size="22"
            color="#fff"
          />
        </template>
        <!-- 输入框 -->
        <template #left>
          <div class="input_box" @click="cityList">
            <div class="input_left">
              <p>北京</p>
              <van-icon
                name="xialakuangxiala"
                class="iconfont icon_top"
                class-prefix="icon"
                size="25"
                color="#808181"
              />
              <span></span>
              <van-icon
                name="search"
                class="icon_foot"
                color="#ccc"
                size="22"
              />
            </div>
            <input
              type="text"
              class="input_search"
              placeholder="请输入小区或地址"
            />
          </div>
        </template>
      </van-nav-bar>
      <van-icon name="arrow-left" class="son" color="#fff" size="26" />
    </div>

    <van-dropdown-menu>
      <van-dropdown-item title="区域">
        <van-picker title="标题" :columns="columns" />
        <van-button type="default" class="button_left">取消</van-button>
        <van-button type="primary" class="button_rt">确定</van-button>
      </van-dropdown-item>

      <van-dropdown-item title="方式">
        <van-picker title="标题" :columns="columns" />
        <van-button type="default" class="button_left">取消</van-button>
        <van-button type="primary" class="button_rt">确定</van-button>
      </van-dropdown-item>

      <van-dropdown-item v-model="value2" :options="option2" />

      <van-dropdown-item title="区域">
        <van-cell is-link @click="showPopup" class="ce">区域</van-cell>
        <van-popup v-model="show" position="right" class="qvyv">内容</van-popup>
      </van-dropdown-item>
    </van-dropdown-menu>

    <div class="bb"></div>

    <ul
      v-for="item in list"
      :key="item.houseCode"
      @click="$router.push('/xiangqing')"
    >
      <li class="lie">
        <div class="tu">
          <img
            :src="dizhi + item.houseImg"
            alt=""
            style="width: 106px; height: 80px; margin-top: '5px'"
          />
        </div>
        <div class="bianli">
          <h4
            style="
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 220px;
            "
          >
            {{ item.title }}
          </h4>
          <p>
            <span>{{ item.desc }}</span>
          </p>
          <div class="hezi">{{ item.tags[0] }}</div>
          <div class="ab">
            <span class="aaa">{{ item.price }}</span
            ><span class="bbb">元/月</span>
          </div>
        </div>
      </li>
      <div class="aaaa"></div>
    </ul>
  </div>
</template>

<script>
import { liebiao } from '@/api/jest'
export default {
  name: 'detail-page',
  data () {
    return {
      list: '',
      dizhi: 'http://liufusong.top:8080',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '区域', value: 0 },
        { text: '方式', value: 1 },
        { text: '租金', value: 2 },
        { text: '筛选', value: 3 }
      ],
      option2: [
        { text: '不限', value: 'a' },
        { text: '整租', value: 'b' },
        { text: '合租', value: 'c' }
      ],
      loading: true,
      show: false,
      columns: ['不限', '整租', '合租']
    }
  },
  async created () {
    const { body } = await liebiao()
    this.list = body.list

    //  console.log(res.body.list);
    //  this.shujv=res
    //  console.log(this.shujv);
  },
  methods: {
    cityList(){
      this.$router.push('/list')
    },
    fn () {},
    fn1 () {},
    // 返回一个特定的 DOM 节点，作为挂载的父节点
    showPopup () {
      this.show = true
    }
  },
  mounted () {
    this.loading = false
  }
}
</script>

<style lang="less" scoped>
.qvyv {
  width: 260px;
  height: 100%;
  z-index: 8888
}

.input_box {
  display: flex;
  margin-left: 30px;
  margin-top: 3px;
  height: 34px;
  border-radius: 5px;
  .input_left {
    display: flex;
    background-color: #fff;
    width: 100px;
    border-radius: 3px 0 0 3px;
    .icon_top {
      color: #000;
      z-index: 8888888;
      margin-top: 7px;
    }
    p {
      height: 38px;
      margin-top: 8px;
      font-size: 16px;
      margin-left: 6px;
    }
    span {
      width: 1px;
      height: 20px;
      margin-left: 3px;
      margin-top: 8px;
      background-color: #ccc;
    }
    .icon_foot {
      margin-top: 7px;
      margin-left: 8px;
    }
  }
  .input_search {
    width: 175px;
    border-radius: 0 3px 3px 0;
    border: 0px;
  }
  .input_search::placeholder {
    padding-left: 10px;
    color: #ccc;
    font-size: 14px;
  }
}

.box {
  position: relative;
  .son {
    position: absolute;
    top: 12px;
    left: 10px;
    color: #fff;
    z-index: 94904;
  }
}
.boxx {
  height: 50px;
}
/deep/ .button_rt {
  width: 60%;
  background-color: #21b97a;
  border: 1px solid #ccc;
}
.button_left {
  background-color: #fff;
  width: 40%;
  color: #21b97a;
}
.van-search {
  padding-bottom: 6px;
  width: 270px;
}
.van-field__body {
  width: 300px;
}
ul {
  .aaaa {
    margin-left: 5%;
    height: 1px;
    width: 90%;
    background-color: #ccc;
  }
  .lie {
    height: 115px;
    .tu {
      margin-left: 14px;
      margin-top: 17px;
    }
    .bianli {
      margin-left: 10px;
      margin-top: 10px;
      .ab {
        margin-top: 3px;
        .aaa {
          display: inline-block;
          font-size: 16px;
          color: #fa604b;
        }
        .bbb {
          margin-left: 5px;
          color: #fa604b;
        }
      }
      p {
        span {
          color: #b3b6b7;
        }
      }
      .hezi {
        height: 25px;
        width: 60px;
        background-color: #e1f5f8;
        border-radius: 5px;
        line-height: 25px;
        margin-top: 2px;
        text-align: center;
        color: #75d1dc;
      }
    }
  }
}
.aa {
  margin-top: 10px;
}
.lie {
  display: flex;
  // justify-content: space-between;
  height: 110px;
  // border: 1px solid red;
}
.bb {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
</style>
